<template>
    <view class="container">
        <!-- 顶部导航 -->
        <view class="header">
            <view class="back" @click="navigateBack">
                <uni-icons type="left" size="24" color="#333"></uni-icons>
            </view>
            <view class="title">申请成为跑腿员</view>
        </view>
        
        <!-- 申请表单 -->
        <view class="form-container">
            <view class="form-item">
                <view class="label">真实姓名</view>
                <view class="input-wrapper">
                    <input 
                        type="text" 
                        placeholder="请输入真实姓名" 
                        v-model="form.realName"
                        @blur="validateField('realName')"
                    />
                </view>
                <view class="error-tip" v-if="errors.realName">{{ errors.realName }}</view>
            </view>
            
            <view class="form-item">
                <view class="label">身份证号</view>
                <view class="input-wrapper">
                    <input 
                        type="idcard" 
                        placeholder="请输入18位身份证号码" 
                        v-model="form.idCard"
                        @blur="validateField('idCard')"
                    />
                </view>
                <view class="error-tip" v-if="errors.idCard">{{ errors.idCard }}</view>
            </view>
            
            <view class="form-item">
                <view class="label">联系电话</view>
                <view class="input-wrapper">
                    <input 
                        type="number" 
                        placeholder="请输入手机号码" 
                        v-model="form.phone"
                        @blur="validateField('phone')"
                    />
                </view>
                <view class="error-tip" v-if="errors.phone">{{ errors.phone }}</view>
            </view>
            
            <view class="form-item">
                <view class="label">身份证照片</view>
                <view class="upload-wrapper">
                    <view class="upload-hint">请上传身份证正反面照片</view>
                    <view class="idcard-images">
                        <!-- 正面照片 -->
                        <view class="idcard-image" @click="chooseImage(0)">
                            <view class="upload-placeholder" v-if="!form.idCardFront">
                                <uni-icons type="camera" size="36" color="#999"></uni-icons>
                                <view class="upload-text">身份证正面</view>
                            </view>
                            <image v-else :src="form.idCardFront" mode="aspectFill"></image>
                        </view>
                        
                        <!-- 反面照片 -->
                        <view class="idcard-image" @click="chooseImage(1)">
                            <view class="upload-placeholder" v-if="!form.idCardBack">
                                <uni-icons type="camera" size="36" color="#999"></uni-icons>
                                <view class="upload-text">身份证反面</view>
                            </view>
                            <image v-else :src="form.idCardBack" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
                <view class="error-tip" v-if="errors.idCardImage">{{ errors.idCardImage }}</view>
            </view>
            
            <view class="form-item">
                <view class="label">个人简介</view>
                <view class="input-wrapper">
                    <textarea 
                        placeholder="请简要描述你的优势或相关经验" 
                        v-model="form.introduction"
                        maxlength="200"
                    ></textarea>
                </view>
            </view>
            
            <!-- 同意协议 -->
            <view class="agreement">
                <uni-checkbox-group v-model="form.agree">
                    <label class="checkbox-label">
                        <uni-checkbox :value="true" :custom-style="{width: '20px', height: '20px'}" color="#FF5A5F"></uni-checkbox>
                        <view class="agreement-text">我已阅读并同意<a href="javascript:void(0)" @click="showAgreement">《跑腿员服务协议》</a></view>
                    </label>
                </uni-checkbox-group>
            </view>
            
            <!-- 提交按钮 -->
            <view class="submit-btn" @click="submitApplication">
                提交申请
            </view>
        </view>
        
        <!-- 加载提示 -->
        <uni-loading-modal 
            :show="loading" 
            content="提交中..." 
            maskType="none"
        ></uni-loading-modal>
        
        <!-- 结果提示 -->
        <uni-popup ref="resultPopup" type="center">
            <view class="result-container">
                <view class="result-icon">
                    <uni-icons :type="resultType === 'success' ? 'checkmarkempty' : 'closeempty'" 
                              :size="60" 
                              :color="resultType === 'success' ? '#4CD964' : '#FF3B30'"></uni-icons>
                </view>
                <view class="result-title">{{ resultTitle }}</view>
                <view class="result-message">{{ resultMessage }}</view>
                <view class="result-btn" @click="closeResultPopup">
                    {{ resultType === 'success' ? '返回首页' : '重新提交' }}
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                realName: '',
                idCard: '',
                phone: '',
                idCardFront: '',
                idCardBack: '',
                introduction: '',
                agree: []
            },
            errors: {
                realName: '',
                idCard: '',
                phone: '',
                idCardImage: ''
            },
            loading: false,
            resultType: '',
            resultTitle: '',
            resultMessage: '',
            uploadType: 0, // 0: 正面，1: 反面
        }
    },
    methods: {
        // 返回上一页
        navigateBack() {
            uni.navigateBack({
                delta: 1
            });
        },
        
        // 选择图片
        chooseImage(type) {
            this.uploadType = type;
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.uploadImage(res.tempFilePaths[0]);
                }
            });
        },
        
        // 上传图片
        uploadImage(tempFilePath) {
            this.loading = true;
            uni.uploadFile({
                url: 'https://api.example.com/upload', // 替换为实际的上传接口
                filePath: tempFilePath,
                name: 'file',
                success: (res) => {
                    const data = JSON.parse(res.data);
                    if (data.code === 200) {
                        if (this.uploadType === 0) {
                            this.form.idCardFront = data.data.url;
                        } else {
                            this.form.idCardBack = data.data.url;
                        }
                        this.$refs.toast.show({
                            title: '上传成功',
                            icon: 'success'
                        });
                    } else {
                        this.$refs.toast.show({
                            title: '上传失败，请重试',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    console.error('上传失败:', err);
                    this.$refs.toast.show({
                        title: '上传失败，请检查网络',
                        icon: 'none'
                    });
                },
                complete: () => {
                    this.loading = false;
                }
            });
        },
        
        // 字段验证
        validateField(field) {
            const value = this.form[field];
            this.errors[field] = '';
            
            switch(field) {
                case 'realName':
                    if (!value) {
                        this.errors.realName = '请输入真实姓名';
                    } else if (!/^[\u4e00-\u9fa5]{2,6}$/.test(value)) {
                        this.errors.realName = '请输入2-6位中文字符';
                    }
                    break;
                case 'idCard':
                    if (!value) {
                        this.errors.idCard = '请输入身份证号码';
                    } else if (!/^\d{17}[\dXx]$/.test(value)) {
                        this.errors.idCard = '请输入正确的18位身份证号码';
                    }
                    break;
                case 'phone':
                    if (!value) {
                        this.errors.phone = '请输入手机号码';
                    } else if (!/^1[3-9]\d{9}$/.test(value)) {
                        this.errors.phone = '请输入正确的手机号码';
                    }
                    break;
            }
        },
        
        // 显示协议
        showAgreement() {
            uni.navigateTo({
                url: '/pages/runner/agreement' // 替换为实际的协议页面路径
            });
        },
        
        // 提交申请
        submitApplication() {
            // 表单验证
            this.validateField('realName');
            this.validateField('idCard');
            this.validateField('phone');
            
            if (!this.form.idCardFront || !this.form.idCardBack) {
                this.errors.idCardImage = '请上传身份证正反面照片';
            } else {
                this.errors.idCardImage = '';
            }
            
            if (this.form.agree.length === 0) {
                this.$refs.toast.show({
                    title: '请阅读并同意服务协议',
                    icon: 'none'
                });
                return;
            }
            
            // 检查是否有错误
            const hasError = Object.values(this.errors).some(error => error !== '');
            if (hasError) {
                return;
            }
            
            // 提交申请
            this.loading = true;
            uni.request({
                url: 'https://api.example.com/runner/apply', // 替换为实际的申请接口
                method: 'POST',
                data: {
                    realName: this.form.realName,
                    idCard: this.form.idCard,
                    phone: this.form.phone,
                    idCardFront: this.form.idCardFront,
                    idCardBack: this.form.idCardBack,
                    introduction: this.form.introduction
                },
                success: (res) => {
                    if (res.data.code === 200) {
                        this.resultType = 'success';
                        this.resultTitle = '申请提交成功';
                        this.resultMessage = '您的申请已提交，审核结果将在3个工作日内通过短信通知您';
                    } else {
                        this.resultType = 'error';
                        this.resultTitle = '申请提交失败';
                        this.resultMessage = res.data.msg || '请稍后重试';
                    }
                    this.$refs.resultPopup.open();
                },
                fail: (err) => {
                    console.error('申请失败:', err);
                    this.resultType = 'error';
                    this.resultTitle = '网络错误';
                    this.resultMessage = '请检查网络连接后重试';
                    this.$refs.resultPopup.open();
                },
                complete: () => {
                    this.loading = false;
                }
            });
        },
        
        // 关闭结果弹窗
        closeResultPopup() {
            this.$refs.resultPopup.close();
            if (this.resultType === 'success') {
                uni.switchTab({
                    url: '/pages/index/index' // 替换为实际的首页路径
                });
            }
        }
    }
}
</script>

<style lang="scss">
.container {
    background-color: #F7F7F7;
    min-height: 100vh;
}

.header {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    
    .back {
        width: 60rpx;
    }
    
    .title {
        flex: 1;
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.form-container {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 0 30rpx;
    
    .form-item {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #eee;
        
        .label {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 15rpx;
        }
        
        .input-wrapper {
            input, textarea {
                font-size: 28rpx;
                color: #666;
                width: 100%;
            }
            
            textarea {
                min-height: 120rpx;
                line-height: 40rpx;
            }
        }
        
        .error-tip {
            color: #FF3B30;
            font-size: 24rpx;
            margin-top: 10rpx;
        }
    }
    
    .upload-wrapper {
        .upload-hint {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 20rpx;
        }
        
        .idcard-images {
            display: flex;
            justify-content: space-between;
            
            .idcard-image {
                width: 330rpx;
                height: 220rpx;
                border: 1rpx dashed #ccc;
                border-radius: 10rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #f9f9f9;
                
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                
                .upload-placeholder {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    
                    .upload-text {
                        margin-top: 10rpx;
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
        }
    }
    
    .agreement {
        padding: 30rpx 0;
        font-size: 24rpx;
        
        .agreement-text {
            color: #666;
            
            a {
                color: #FF5A5F;
            }
        }
    }
    
    .submit-btn {
        background-color: #FF5A5F;
        color: #fff;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 45rpx;
        font-size: 32rpx;
        margin: 60rpx 0;
    }
}

.result-container {
    padding: 60rpx 40rpx;
    width: 600rpx;
    border-radius: 20rpx;
    background-color: #fff;
    
    .result-icon {
        text-align: center;
        margin-bottom: 30rpx;
    }
    
    .result-title {
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
    }
    
    .result-message {
        text-align: center;
        font-size: 28rpx;
        color: #666;
        line-height: 40rpx;
        margin-bottom: 40rpx;
    }
    
    .result-btn {
        background-color: #FF5A5F;
        color: #fff;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 30rpx;
    }
}
</style>    